<template>
	<view>
		<view class="content" @click="dakai()">
			<view class="content_fl">
				<text class="text">* </text>
				<text class="text1">货物名称</text>
			</view>
			<view class="content_fr">
				<input type="text" v-model="goodsName" placeholder="请进行货物选择" disabled/>
				<image src="../../static/iocn11.png"></image>
			</view>
		</view>
		<view class="middle">
			<view class="middle_top"><text>* </text>包装方式</view>
			<view class="middle_box">
				<view v-for="(item,index) in list" :class="mnamIndex == index ?'active':''" :key="index" @click="wdianji(index,item)">{{item.name}}</view>
			</view>
			<view class="middle_key"><input type="text" v-model="goodsPackagMethod" placeholder="请填写包装方式" /></view>
		</view>
		<view class="container">
			<view class="container_top"><text>* </text>重量/体积</view>
			<view class="container_box">
				<text>重量（吨）</text>
				<input type="number" v-model="goodsWeight" placeholder="请输入货物重量" />
			</view>
			<view class="container_box">
				<text>体积（方）</text>
				<input type="number" v-model="goodsSize" placeholder="请输入货物体积" />
			</view>
		</view>
		<view class="footer" @click="funhuei()">确认</view>

		<!-- 弹窗 -->
		<view class="primary" v-show="tanchang">
			<view class="primary_list">
				<image src="../../static/iocn7.png" class="guanbi" @click="guanbi()"></image>
				<view class="primary_top">
					<text>货物名称</text>
				</view>
				<!-- <view class="sousuo"><u-search :showAction="false" v-model="keyword"></u-search></view> -->
				<!-- <view class="primary_keb">
					<view class="top">
						<text>历史搜索</text>
						<image src="../../static/iocn15.png"></image>
					</view>
					<view class="box">
						<view v-for="(item,index) in list">电动车</view>
					</view>
				</view> -->
				<view class="section">
					<view class="content_fr">
						<!-- <image src="@/static/iocn52.png" ></image> -->
						<input type="text" v-model="goodsName" placeholder="请输入货物名称" />
						<button @click="querenguanbi()">确认</button>
					</view>
					<view class="section_top"><text>*</text>货物类型</view>
					<view class="section_box">
						<view v-for="(item,index) in Length" :class="navIndex == index ?'active':''" :key="index" @click="clickbost(index,item)">{{item.name}}</view>
					</view>
				</view>
				<view class="current">
					<view>
						请勿发布及托运危险货物、违禁货物，限运货物需有相应证明文件否则您可能面临平台禁用账号、行政处罚等后果
					</view>
					<view>
						具体详情请查看
						<text>《平台货物发布及承运规范》</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {GetDics} from '@/public/Api/update.js'
	import {
		setValue,
		getValue
	} from '@/public/storeage/index.js'
	export default {
		data() {
			return {
				list: [],
					Length:[],
					
					keyword:'',
					
					tanchang:false,
					
					goodsWeight:'',
					goodsSize:'',
					
					goodsPackagMethod:'',
					mnamIndex:'80',
					goodsName:'',
					navIndex:'80'
				};
			},
			onLoad() {
				this.PackageType();
				this.GoodsType();
			},
			methods:{
				dakai(){
					this.tanchang = true
				},
				guanbi(){
					this.tanchang = false
				},
				
				wdianji(index,item){
					this.mnamIndex = index
					this.goodsPackagMethod = item.name
				},
				
				clickbost(index,item){
					this.navIndex = index
					this.goodsName = item.name
					this.tanchang = false
				},
				querenguanbi(){
					this.tanchang = false
				},
				// 获取字典列表  获取车长
				async GoodsType() {
					try {
						const {
							data: res
						} = await GetDics({
							layout:'GoodsType'
						})
						this.Length = res.result
					} catch (e) {}
				},
				
				// 获取字典列表  包装
				async PackageType() {
					try {
						const {
							data: res
						} = await GetDics({
							layout:'PackageType'
						})
						this.list = res.result
					} catch (e) {}
				},
				
				
				funhuei(){
					var goodsName = this.goodsName
					var goodsPackagMethod = this.goodsPackagMethod
					var goodsWeight = this.goodsWeight
					var goodsSize = this.goodsSize
					if (goodsName == '') {
						uni.showToast({
							title: "货物名称不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (goodsPackagMethod == '') {
						uni.showToast({
							title: "包装方式不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (goodsWeight == '') {
						uni.showToast({
							title: "重量不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					if (goodsSize == '') {
						uni.showToast({
							title: "体积不能为空",
							icon: 'none',
							duration: 2000
						})
						return false
					}
					setValue('goodsName',goodsName);
					setValue('goodsPackagMethod',goodsPackagMethod);
					setValue('goodsWeight',goodsWeight);
					setValue('goodsSize',goodsSize);
					uni.navigateBack({
						delta:1,//返回层数，2则上上页
					})
				}
			}
		}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
		padding: 20upx 15upx;
	}

	.content {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
		background-color: #fff;
		border-radius: 20upx;
		padding: 0 30upx;
		height: 107upx;

		.content_fl {
			display: flex;
			align-items: center;
			font-size: 32upx;
			font-weight: bold;
			color: #000;

			.text {
				color: #EF4D3D;
				margin-right: 10upx;
			}
			.text1{
				width: 200upx;
			}
		}

		.content_fr {
			display: flex;
			align-items: center;

			input {
				font-size: 28upx;
				color: #808080;
				text-align: right;
			}

			image {
				width: 32upx;
				height: 32upx;
				margin-left: 20upx;
			}
			
		}
	}

	.middle {
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
		background-color: #fff;
		border-radius: 20upx;
		padding: 20upx 70upx;
		margin-top: 23upx;

		.middle_top {
			display: flex;
			align-items: center;
			font-size: 32upx;
			font-weight: bold;
			color: #000;

			text {
				color: #EF4D3D;
				margin-right: 10upx;
			}
		}

		.middle_box {
			display: flex;
			align-items: center;
			flex-wrap: wrap;

			view {
				width: 161upx;
				height: 52upx;
				opacity: 1;
				border-radius: 10upx;
				background: #E5E5E5;
				font-size: 28upx;
				font-weight: 400;
				color: rgba(0, 0, 0, 1);
				text-align: center;
				line-height: 52upx;
				margin-top: 23upx;
				margin-right: 40upx;
			}
			.active{
				background-color: #EF4D3D;
				color: #fff;
			}

			view:nth-child(3n) {
				margin-right: 0;
			}
		}

		.middle_key {
			padding-top: 23upx;

			input {
				width: 100%;
				height: 91upx;
				opacity: 1;
				background: #F0F0F0;
				padding: 0 20upx;
				font-size: 28upx;
			}
		}
	}

	.container {
		box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
		background-color: #fff;
		border-radius: 20upx;
		padding: 20upx 30upx;
		margin-top: 23upx;

		.container_top {
			display: flex;
			align-items: center;
			font-size: 32upx;
			font-weight: bold;
			color: #000;

			text {
				color: #EF4D3D;
				margin-right: 10upx;
			}
		}

		.container_box {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-top: 23upx;

			text {
				font-size: 28upx;
				font-weight: bold;
				color: #000;
			}

			input {
				width: 328upx;
				height: 72upx;
				background: #F0F0F0;
				font-size: 28upx;
				text-align: center;
			}
		}
	}

	.footer {
		width: 526upx;
		height: 72upx;
		opacity: 1;
		border-radius: 17upx;
		background: #EF4D3D;
		font-size: 31upx;
		text-align: center;
		line-height: 72upx;
		color: #fff;
		font-weight: bold;
		position: fixed;
		bottom: 50upx;
		left: 112upx;
	}
	
	
	.primary{
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		left: 0;
		z-index: 9999;
		.primary_list{
			width: 100%;
			background-color: #fff;
			position: absolute;
			left: 0;
			bottom: 0;
			border-radius: 20upx 20upx 0 0;
			padding: 0 35upx;
			.guanbi{
				width: 32upx;
				height: 32upx;
				position: absolute;
				top: 35upx;
				right: 35upx;
			}
			.primary_top{
				padding: 45upx 0;
				border-bottom: 1upx solid #e5e5e5;
				text{
					display: block;
					text-align: center;
					font-size: 35upx;
					font-weight: bold;
				}
			}
			.sousuo{padding-top: 30upx;}
			.primary_keb{
				padding-bottom: 50upx;
				border-bottom: 1upx solid #e5e5e5;
				padding-top: 40upx;
				.top{
					display: flex;
					align-items: center;
					justify-content: space-between;
					text{
						font-size: 28upx;
						color: #000;
						font-weight: bold;
					}
					image{
						width: 39upx;
						height: 39upx;
					}
				}
				.box{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 0 20upx;
					view{
						width: 136upx;
						height: 52upx;
						opacity: 1;
						border-radius: 10upx;
						background: #E5E5E5;
						font-size: 28upx;
						color: #000;
						text-align: center;
						line-height: 52upx;
						margin-top: 30upx;
						margin-right: 32upx;
					}
					view:nth-child(4n) {
						margin-right: 0;
					}
				}
			}
			.section{
				padding-top: 45upx;
				.content_fr {
					display: flex;
					align-items: center;
				   justify-content: space-evenly;
				 
					input {
						box-shadow: 1.75upx 1.75upx 7.01upx 0px #bababa;
						background-color: #fff;
						border-radius: 20upx;
						width: 70%;
						height: 80upx;
						border: 1px solid #808080;
						font-size: 28upx;
						color: #808080;
						text-align: center;
						margin-bottom: 30upx;
						margin-left: 30upx;
					}
					button{
						font-size: 28upx;
						width: 130upx;
						line-height: 70upx;
						margin-top: -30upx;
						background-color: #EF4D3D;
						color: #fff;
					}
				}
				.section_top{
					display: flex;
					align-items: center;
					font-size: 32upx;
					color: #000;
					font-weight: bold;
					text{
						color: #EF4D3D;
					}
				}
				.section_box{
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					padding: 0 30upx;
					view{
						width: 136upx;
						height: 52upx;
						opacity: 1;
						border-radius: 10upx;
						background: #E5E5E5;
						font-size: 28upx;
						color: #000;
						text-align: center;
						line-height: 52upx;
						margin-top: 14upx;
						margin-right: 23upx;
					}
					.active{
						background-color: #EF4D3D;
						color: #fff;
					}
					view:nth-child(4n) {
						margin-right: 0;
					}
				}
			}
			.current{
				padding-top: 65upx;
				padding-bottom: 45upx;
				view{
					font-size: 24upx;
					text-align: justify;
					color: #808080;
					text{
						color: #EF4D3D;
					}
				}
			}
		}
	}
</style>
